<template>
  <div class="offlineRate">
    <Card dis-hover :bordered="true">
      <template #title>搜索</template>
      <Form ref="formSearch" :model="formDataSearch" label-position="right" :label-width="100" inline>
        <FormItem label="经营企业">
          <i-input v-model="formDataSearch.driverVehiclePlate" placeholder="请输入车牌号码" clearable />
        </FormItem>
        <FormItem label="离线周期">
          <i-select v-model="formDataSearch.finishState" multiple filterable placeholder="请选择报警类型" clearable>
            <Option value="0">未开始</Option>
            <Option value="1">已完成</Option>
            <Option value="2">进行中</Option>
          </i-select>
        </FormItem>
        <Button type="primary" @click="searchSubmit">搜索</Button>
      </Form>
    </Card>
    <Card  dis-hover :bordered="true" style="height: 100%;overflow: hidden;margin: 10px 0 0;">
      <template #title>列表</template>
      <template #extra>
        <!--      <Button type="primary" @click="exportData" size="small">导出</Button>-->
      </template>
      <xdTable ref="xdTableRef" :tableData="tableData"></xdTable>
    </Card>
  </div>
</template>
<script setup>


import {inject, reactive, ref,resolveComponent} from 'vue'
import xdTable from '@/components/table/index.vue'
const $common = inject('$common');//自己封装的方法
const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
const $axios = inject('$axiosInterceptor');// 变量全局化 axios
const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件

// 搜索
const formDataSearch = reactive({

})

// 列表数据
// 用于获取$refs
const xdTableRef = ref();
const tableData = reactive({
  url: apiUrl.dynamicMonitorEnterpriseOfflineRate,//请求地址
  method: 'post',//请求方式
  where: {

  },//搜索条件
  height: '100%',//表格高度 auto
  page: true,//分页是否使用
  columns: [//表头数据
    {type: 'selection', width: 60, align: 'center'},
    {type: 'index', width: 70, align: 'center', title: '序号'},
    {title: '经营企业', minWidth: 120, key: 'driverName',tooltip:true,},
    {title: '总车辆数', minWidth: 120, key: 'driverTypeName',tooltip:true,},
    {title: '离线车辆数', minWidth: 120, key: 'driverVehicleNo',tooltip:true,},
    {title: '离线率', minWidth: 120, key: 'driverPhone',tooltip:true,},
    {
      title: '操作', width: 80, fixed: 'right', render: (h, params) => {

        var operationButtons = [];
        operationButtons.push(
            h('span', {
              style: {"color": "#2d8cf0", "cursor": "pointer"},
              onClick: () => {

                state.selectData = JSON.parse(JSON.stringify(params.row));
                state.formTitle = state.selectData.transportValue + ' 详情';
                state.formOperation = true;
              }
            }, "查看")
        )
        return operationButtons;
      }
    },

    // {title: '操作类型', width: 120, key: 'operatetype', render: (h, params) => {
    //     if(params.row.operatetype == 1){
    //       return h(resolveComponent('Tag'), {type: 'dot', color: 'success'}, '正常');
    //     }else{
    //       return h(resolveComponent('Tag'),  {type: 'dot', color: 'primary'}, '异常');
    //     }
    //   }
    // },
  ],
  pagingParameters:{// 分页参数
    page:'pageNo',
    limit:'pageSize'
  },
  format: {//返回数据格式
    list: ['data'],//数据list
    count: ['count'],//数据总量
  },
})

const state = reactive({
  carPlateColor:[
    {codeNumber: 1, color: 'primary', desc: '蓝色'},
    {codeNumber: 2, color: 'warning', desc: '黄色'},
    {codeNumber: 3, color: 'black', desc: '黑色'},
    {codeNumber: 4, color: ' ', desc: '白色'},
    {codeNumber: 5, color: 'success', desc: '绿色'},
    {codeNumber: 93, color: '#87d068', desc: '黄绿色'},
    {codeNumber: 9, color: 'cyan', desc: '其他'}
  ],//车辆颜色

  personTypeList:[],//从业类型
  selectData:{},//选中数据
  formOperation:false,//弹框状态
  formTitle:'',//弹框标题
  formData:{
    username:'gtjt_llb',
    password:'sersllb123',
  },//表单数据
});

//搜索方法
const searchSubmit = ()=>{
  let data = JSON.parse(JSON.stringify(formDataSearch));
  console.log(data)
  tableData.where = data;
  xdTableRef.value.tableLoadData(true)
}
</script>

<style lang="less">
.offlineRate{
  padding: 0px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .ivu-card-body {
    height: calc(100% - 41px);
  }
}
</style>
